<template>
    <template v-if="item.children && item.children.length > 0">
        <el-sub-menu :index="item.path">
            <template #title>
                <el-icon v-if="item.icon">
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.name }}</span>
            </template>
            <menu-item v-for="child in item.children" :key="child.path" :item="child"></menu-item>
        </el-sub-menu>
    </template>
    <template v-else>
        <el-menu-item :index="item.path">
            <el-icon v-if="item.icon">
                <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
        </el-menu-item>
    </template>
</template>
  
<script>
export default {
  props: {
    item: Object,
  },
};
</script>